import React, {Component} from 'react'

import './index.css'
class Social  extends Component {

  render() {
   
    return (
        <div>
            <p class="container-title">新建账号</p>
           <div class="ba-new-container">
               <p class="set-username set">设置账号 
                    <input class="new-input" type="text" placeholder="6-12位数字或英文字母"/></p>
               <p class="set-password set">设置密码 
                    <input class="new-input" type="text" placeholder="6-12位数字或英文字母"/></p>
               <p class="re-enter-password set">确认密码 
                    <input class="new-input" type="text" placeholder="请再次输入密码"/></p>

               <div class="power-set">
                    <p class="power-title">权限设定</p>
                    <div class="power-item">
                        <p><input type="checkbox"/><span class="title">社区方面</span></p>
                        <div class="item-children">
                            <p><input type="checkbox"/><span>帖子列表操作</span></p>
                            <p><input type="checkbox"/><span>新建帖子</span></p>
                            <p><input type="checkbox"/><span>帖子评论</span></p> 
                        </div>
                    </div> 

                    <div class="power-item">
                        <p><input type="checkbox"/><span class="title">用户方面</span></p>
                        <div class="item-children">
                            <p><input type="checkbox"/><span>禁止用户进行操作</span></p>
                            <p><input type="checkbox"/><span>用户黑名单操作</span></p>
                        </div>
                    </div> 

                    <div class="power-item">
                        <p><input type="checkbox"/><span class="title">聊天室方面</span></p>
                        <div class="item-children">
                            <p><input type="checkbox"/><span>聊天室公告操作</span></p>
                            <p><input type="checkbox"/><span>新建和编辑聊天室公告</span></p>
                            <p><input type="checkbox"/><span>用户禁言</span></p> 
                        </div>
                    </div> 

                    <div class="power-item">
                        <p><input type="checkbox"/><span class="title">社区方面</span></p>
                        <div class="item-children">
                            <p><input type="checkbox"/><span>广告列表操作</span></p>
                            <p><input type="checkbox"/><span>新建和编辑广告</span></p>
                        </div>
                    </div> 

                    <div class="power-item">
                        <p><input type="checkbox"/><span class="title">系统通知</span></p>
                        <div class="item-children">
                            <p><input type="checkbox"/><span>系统通知操作</span></p>
                            <p><input type="checkbox"/><span>新建和编辑系统通知</span></p>
                        </div>
                    </div> 

                    <div class="power-item">
                        <p><input type="checkbox"/><span  class="title">客服相关</span></p>
                    </div> 
               </div>
           </div>
        </div>
    )
  }
}

export default Social